<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style>
#match { background-color: red }
#hover:hover #match { background-color: green }
</style>
<div id="hover">
    Hover this text ...
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span id="match"> and this should have a green background.</span>
</div>
<div id="host"></div>
<script>
description("Removing a shadow tree stylesheet should cause an invalidation set update.")

shouldBeDefined("window.internals");
shouldBeDefined("window.eventSender");

var red = "rgb(255, 0, 0)";
var green = "rgb(0, 128, 0)";

function hoverElement(element) {
    eventSender.mouseMoveTo(0, 0);
    document.body.offsetLeft; // force recalc.
    var x = element.offsetLeft + 1;
    var y = element.offsetTop + 1;
    eventSender.mouseMoveTo(x, y);
}

// Add and remove a ":hover *" rule from a shadow tree.
var root = host.attachShadow({mode: 'open'});
root.innerHTML = "<style>:hover * { background-color: pink }</style>";
hover.offsetTop;
root.innerHTML = "";

shouldBe("getComputedStyle(match).backgroundColor", "red");

hoverElement(hover);

shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "2");
shouldBe("getComputedStyle(match).backgroundColor", "green");

</script>
